<template>
  <layout title="steps步骤条">
      <layout-content title="基础使用">
        <tn-steps v-model="currentSelect" :data="defaultStepData"></tn-steps>
        <view class="tn-margin-top">
          <tn-steps v-model="currentSelect" mode="number" :data="defaultStepData"></tn-steps>
        </view>
        <view class="tn-margin-top">
          <tn-steps v-model="currentSelect" mode="icon" :data="defaultStepData"></tn-steps>
        </view>
        <view class="tn-margin-top">
          <tn-steps v-model="currentSelect" mode="dotIcon" :data="defaultStepData"></tn-steps>
        </view>
      </layout-content>

      <layout-content title="设置颜色">
        <tn-steps v-model="currentSelect" inactive-color="#E6E6E6" active-color="#3D7EFF" :data="defaultStepData"></tn-steps>
      </layout-content>

      <layout-content title="设置激活时的图标">
        <tn-steps v-model="currentSelect" mode="dotIcon" icon="safe" inactive-color="#E6E6E6" active-color="#3D7EFF" :data="defaultStepData"></tn-steps>
      </layout-content>

      <layout-content title="无标题">
        <tn-steps v-model="currentSelect" mode="icon" :data="noTitleStepData" icon="safe"></tn-steps>
      </layout-content>

      <layout-content title="自定义图标">
        <tn-steps v-model="currentSelect" mode="icon" :data="customStepData"></tn-steps>
      </layout-content>

      <view class="operation_btn">
        <tn-button shape="round" width="100%" size="lg" @click="handleNextStep">下一步</tn-button>
      </view>
  </layout>

  <layout-doc v-model="showDoc" :content="docContent"></layout-doc>
  <doc-fab @click="handleDocFabClick"/>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { docContent } from './lib/doc'
import Layout from '@/components/layout/index.vue'
import LayoutContent from '@/components/layout/content.vue'
import LayoutDoc from '@/components/layout/doc.vue'
import DocFab from '@/components/doc-fab/index.vue'

import TnButton from '@/tuniao-ui/components/tn-button/src/Button.vue'
import TnSteps from '@/tuniao-ui/components/tn-steps/src/Steps.vue'
import { StepData } from '@/tuniao-ui/types'

// 弹出文档 
let showDoc = ref<boolean>(false)
const handleDocFabClick = () => {
  showDoc.value = true
}

// 当前选中的值
let currentSelect = ref<number>(0)

// 默认数据
const defaultStepData: StepData[] = [
  { title: '第一步' },
  { title: '第二步' },
  { title: '第三步' },
  { title: '第四步' }
]

const noTitleStepData: StepData[] = Array(4).fill({})

// 自定义数据
const customStepData: StepData[] = [
  { title: '第一步', icon: 'funds', activeIcon: 'funds-fill' },
  { title: '第二步', icon: 'discover-planet', activeIcon: 'discover-planet-fill', inactiveColor: '#D1F397', activeColor: '#A4E82F' },
  { title: '第三步', icon: 'sport-jog', activeIcon: 'sport-run' },
  { title: '第四步' }
]

// 处理点击下一步
const handleNextStep = () => {
  currentSelect.value++
  if (currentSelect.value > 4) currentSelect.value = 0
}
</script>

<style lang="scss" scoped>
.operation_btn {
  width: 50%;
  position: fixed;
  bottom: 60rpx;
  left: 50%;
  transform: translateX(-50%);
}
</style>
